<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <a-form :form="form" layout="vertical" style="padding:0 12px">
      <a-form-item style="display:none">
        <a-input v-decorator="['projectId']"/>
      </a-form-item>
        <a-row :gutter="24">
            <a-col :span="12">
                <a-form-item  :label="i18n('form.projectName','项目名称')">
                    <a-input :placeholder="i18n('form.projectName','项目名称')" @blur.native="getPinyinByName()" v-decorator="['projectName', {rules: [{required: true, message: i18n('form.projectName','项目名称','input')}]}]"/>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  :label="i18n('form.projectAlias','项目别名')" class="x-a-form-model-error">
                    <a-input :placeholder="i18n('form.projectAlias','项目别名')" v-decorator="['projectAlias', {rules: [
                        {required: true, message: i18n('form.projectAlias','项目别名','input')},
                        {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                        ]}]"/>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="24">
            <a-col :span="12">
                <a-form-item  :label="i18n('form.itemClassification','项目分类')">
                    <rx-category-select cat-key="API" :isGrant="true" v-if="isShowManageTree" :isAdmin="isManageToTree"
                                        v-decorator="['treeId', {rules: [{required: true, message: i18n('form.itemClassification','项目分类','input')}]}]"></rx-category-select>
                  <a-input v-else style="display:none;" v-decorator="['treeId']" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  :label="i18n('form.projectStatus','项目状态')">
                    <a-radio-group :placeholder="i18n('form.projectStatus','项目状态')" v-decorator="['status',{initialValue:'YES'}]">
                        <a-radio value="YES">
                            {{i18n('isProjectStatusMap.enable','启用')}}
                        </a-radio>
                        <a-radio value="NO">
                            {{i18n('isProjectStatusMap.disable','禁用')}}
                        </a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="24">
            <a-col :span="24">
                <a-form-item  :label="i18n('form.domain','域名路径')">
                    <a-input v-decorator="['domainPath',{rules: [{ required: true, message:i18n('form.domain','域名路径','input')}],},]" style="width: 100%">
                        <a-select
                            slot="addonBefore"
                            v-decorator="['domainTcp', { initialValue: 'http://' }]"
                            style="width: 90px"
                        >
                            <a-select-option value="http://">
                                http://
                            </a-select-option>
                            <a-select-option value="https://">
                                https://
                            </a-select-option>
                        </a-select>
                    </a-input>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="24">
            <a-col :span="24">
                <a-form-item  :label="i18n('form.description','描述')">
                    <a-textarea :placeholder="i18n('form.description','描述')" v-decorator="['description', {rules: [{required: false, message: i18n('form.description','描述','input')}]}]" :rows="4" />
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
  </rx-dialog>
</template>
<script>
  import SysInterfaceProjectApi from '@/api/system/core/sysInterfaceProject'
  import {BaseForm,RxDialog} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'SysInterfaceProjectAdd',
    mixins:[BaseForm],
    components: {
      RxDialog,
    },
    created() {
      this.isUserManager(this.$route.query.appId);
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "sysInterfaceProject", key);
        },
        i18n2(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
      get(id){
        return SysInterfaceProjectApi.get(id);
      },
      save(values){
        return SysInterfaceProjectApi.save(values);
      },
        getPinyinByName(){
            let name=this.form.getFieldsValue().projectName
            if (!name){
                return;
            }
            if (this.form&&this.form.getFieldsValue().projectAlias){
                return;
            }
            this.getPinyin(name).then(res => {
                //去除不可见的特殊符号
                if(res){
                    res=res.replace(/\u200B/g,'');
                }
                this.form.setFieldsValue({projectAlias:res})
            })
        },
    }
  }
</script>
